<template>
  <div class="w-full absolute inset-0 z-20" v-show="visible">
    <img
      :src="cover"
      alt=""
      @load="coverLoad"
      class="absolute inset-0 w-full h-full"
    />
    <div class="w-full h-full flex flex-col items-center justify-center">
      <nut-animate type="breath" :loop="true">
        <nut-button v-if="!status" type="info" @click="clickBtn"
          >点击播放</nut-button
        >
        <div v-else class="text-light-50">加载中...</div>
      </nut-animate>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  status: {
    type: Boolean,
    default: false,
  },
  cover: {
    type: String,
    default: "",
    required: true,
  },
});

const emits = defineEmits(["submit", "coverLoad"]);

const clickBtn = () => {
  emits("submit");
};

const coverLoad = () => {
  emits("coverLoad");
};
</script>
